<template>
    <div class="editShopCont" :style="'min-height: '+docheight+'px'">
        <div v-if="!showTimeOut">
            <div class="couponList">
                <div class="carItem" :key="index" v-for="(item,index) in couponList">
                    <div class="carTop">
                        <div class="carLeft">
                            <div class="shopName">{{index+1}}.优惠券</div>
                            <div class="carTime">{{item.expiration_time}}到期</div>
                        </div>
                        <div class="carCenter">
                            <div class="priceCont">
                                <span>¥</span>
                                <span class="priceContVal">{{item.reduce}}元</span>
                            </div>
                            <div class="fullPrice">满¥{{item.full}}元可用</div>
                        </div>  
                    </div>  
                    <div class="carBottom">
                        <div class="createTime">创建时间:{{item.create_time}}</div>
                        <div class="carDel" @click="delFullFn(item,index)">删除优惠券</div>
                    </div>                
                </div>
            </div>
            <div class="formCont">
                <div class="formItem noflex">
                    <div class="fullList">
                        <div class="addTip">新增优惠券</div>
                        <div class="fullItem">
                            <div class="fullName">满(元)</div>
                            <div class="fullCont">
                                <van-field placeholder="请输入金额" v-model="couponInfo.full" type="digit" />
                            </div>
                        </div>
                        <div class="fullItem">
                            <div class="fullName">减(元)</div>
                            <div class="fullCont">
                                <van-field placeholder="请输入金额" v-model="couponInfo.reduce" type="digit" />
                            </div>
                        </div>
                        <div class="fullItem">
                            <div class="fullName">到期日期</div>
                            <div class="fullCont">
                                <div class="flexInput">
                                    <van-field
                                        v-model="couponInfo.expiration_time"
                                        readonly
                                        placeholder="到期日期"
                                        @click="showTime = true"
                                    />
                                </div>
                                <van-calendar v-model:show="showTime" @confirm="sureTime" />
                            </div>
                        </div>
                        <div class="formTip" v-if="couponInfo.err_full">{{ couponInfo.err_full }}</div>
                    </div>
                </div>
            </div>
            <save-btn @saveClick="saveFn" value="确认新增"></save-btn>
        </div>
        <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
        <sub-load v-if="showLoad"></sub-load>
        <getLoad v-if="!showCont"></getLoad>
        <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
    import {Toast } from 'vux' 
    import saveBtn from '@/components/public/saveBtn.vue'
    import subLoad from '@/components/public/subLoad.vue'
    import getLoad from '@/components/public/getLoad'
    import getTimeOut from '@/components/public/getTimeOut'
    import {coupon_add,coupon,coupon_del} from '@/http/api'

    export default {
      components: {getLoad,getTimeOut,subLoad,Toast,saveBtn},
      data() {
        return {
            showTimeOut: false,
            showCont:false,
            showLoad:false,
            showText:'',
            showToast:false,
            showTime:false,
            mj_rule:[],
            couponInfo:{
                err_full:'',
                reduce:'',
                full:'',
                expiration_time:'',
            },
            couponList:[],
        }
      },
      props: {},
      methods:{
        sureTime(val){
            this.couponInfo.expiration_time = this.$converData.getDateStr(val)
            this.showTime = false
        },
        delFullFn(item){
            let data = {
                coupon_id:item.coupon_id
            }
            coupon_del(data).then((res)=>{
                this.showToast = true
                if(res.data.code==1){
                    this.showText = '删除成功'
                    this.getData()
                }else{
                    this.showText = res.data.msg
                }
            }).catch((err)=>{
                this.showLoad = false
                this.showToast = true
                this.showText = '网络超时'
            })
        },
        saveFn(){
            let data = {
                full:this.couponInfo.full,
                reduce:this.couponInfo.reduce,
                expiration_time:this.couponInfo.expiration_time,
            }
            if(this.couponInfo.expiration_time==''){
                this.showToast = true
                this.couponInfo.err_full = '请选择优惠券到期日期'
                this.showText = '请选择优惠券到期日期'
                return false
            }
            else{
                if(!this.showLoad){
                    this.showLoad= true
                    coupon_add(data).then((res)=>{
                        this.showToast = true
                        if(res.data.code==1){
                            this.showText = '新增成功'
                            this.couponInfo = {
                                reduce:'',
                                full:'',
                                expiration_time:'',
                                err_full:'',
                            }
                            this.getData()
                        }else{
                            this.showText = res.data.msg
                        }
                        this.showLoad = false
                    }).catch((err)=>{
                        this.showLoad = false
                        this.showToast = true
                        this.showText = '网络超时'
                    })
                }
            }
        },
        getData(){
            let data ={}
            coupon(data).then((res)=>{
                this.showCont= true
                if(res.data.code==1){
                    this.couponList = res.data.data
                }else{
                    this.showToast = true
                    this.showText = '数据请求失败'
                }
            }).catch(()=>{
          this.showTimeOut = true
          this.showCont= true
        })
        },
      },
      mounted(){
        
      },
      created() {
        this.getData()
      },
    }
  </script>
  
  <style scoped lang="less">
  .editShopCont{
    width: 100%;
    padding-top: 0.75rem;
    background-color: #edf2ff;
    padding-bottom: 1rem;
    box-sizing: border-box;
    .couponList{
        width: 100%;
        padding: 0rem 4%;
        box-sizing: border-box;
        .carItem{
            background-color: #fff;
            padding: 0.75rem;
            box-sizing: border-box;
            border-radius: 0.25rem;
            overflow: hidden;
            margin-bottom: 0.75rem;
            .carTop{
                width: 100%;
                justify-content: space-between;
                align-items: center;
                display: flex;
                .carLeft{
                    width: 1rem;
                    flex: 1;
                    padding-right: 0.75rem;
                    border-right: 1px dashed #ebebeb;
                    .shopName{
                        font-size: 0.8rem;
                        font-weight: bold;
                        margin-bottom: 0.5rem;
                        width: 100%;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    .carTime{
                        color: #999;
                        font-size: 0.6rem;
                    }
                }
                .carCenter{
                    width: 40%;
                    text-align: center;
                    .priceCont{
                        color: #ff2d2d;
                        .priceContVal{
                            font-size: 1.5rem;
                        }
                    }
                    .fullPrice{
                        font-size: 0.6rem;
                        color: #999;
                    }
                }
                .carRight{
                    width: 10%;
                    white-space: wrap;
                    padding: 0.5rem 0.25rem;
                    box-sizing: border-box;
                    text-align: center;
                    background-color: #f4db95;
                    font-size: 0.6rem;
                }
            }
            .carBottom{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 0.75rem;
                border-top: 1px dashed #ebebeb;
                padding-top: 0.75rem;
                .createTime{
                    font-size: 0.6rem;
                    color: #999;
                }
                .carDel{
                    font-size: 0.6rem;
                    padding: 0 0.75rem;
                    border-radius: 1rem;
                    line-height: 1.5rem;
                    background-color: #ebebeb;
                    color: #999;
                }
            }
        }
    }
    .formCont{
        width: 92%;
        margin: 0 auto;
        padding: 1rem 4%;
        border-radius: 0.25rem;
        background-color: #fff;
        box-sizing: border-box;
        .formItem{
            padding: 0.25rem 0;
            width: 100%;
            display: flex;
            position: relative;
            .formName{
                width: 4rem;
                font-size: 0.7rem;
                color: #646566;
                margin-right: 0.75rem;
                box-sizing: border-box;
            }
            .formInput{
                flex: 1;
                width: 2rem;
            }
            .fullList{
                .addTip{
                    font-weight: bold;
                    margin-bottom: 0.75rem;
                }
                .fullItem{
                    display: flex;
                    width: 100%;
                    align-items: center;
                    padding-bottom: 1rem;
                    position: relative;
                    .formTip{
                        position: absolute;
                        left: 4.75rem;
                        top: 2.25rem;
                        font-size: 0.6rem;
                        color: rgb(234, 78, 98);
                    }
                    .fullName{
                        width: 4rem;
                        color: #646566;
                        margin-right: 0.75rem;
                        font-size: 0.7rem;
                    }
                    .fullCont{
                        display: flex;
                        align-items: center;
                        width: 5rem;
                        flex: 1;
                    }
                }
                .formTip{
                    color: #ff2d2d;
                    font-size: 0.6rem;
                }
            }
            .listAddBtn{
                display: flex;
                margin-top: 0.5rem;
                justify-content: flex-end;
            }
        }
        .hasMargin{
            margin-top: 1rem;
        }
        .noBorder{
            border-bottom: none;
        }
        .noflex{
            display: block;
        }
        .flexCenter{
            align-items: center;
        }
    }
  }
  </style>
<style>
.van-field__label{
    width:4rem;
}
.formCont .van-cell{
    padding: 0.5rem 0;
}
.van-cell::after{
    border-bottom: none !important;
}
</style>
  

<style>
.formPhone .van-field__label{
    line-height: 33px;
}
</style>